<template>
	<div>
		<ul class="container">
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>
		       <li></li>      
		   </ul>
					
	</div>
</template>

<script>
</script>

<style >
	.container{
	           margin-top: 10px;
	           width: 100%;
	           height: 120px;
	           white-space: nowrap;
	           overflow: hidden;
	       }
	       .container li{
	           display: inline-block;
	           margin-top: 30px;
	           margin-right: 50px;
	           width: 15px;
	           height: 30px;
	           border-radius: 50%;
	           position: relative;
	       }
	       .container li::after{
	           content: '';
	           position: absolute;
	           top: -5px;
	           left: 50%;
	           transform: translateX(-50%);
	           width: 20px;
	           height: 12px;
	           background-color: rgb(27, 27, 27);
	           box-shadow: inset 0 0 3px rgb(129, 129, 129);
	           border-radius: 10px;
	 
	       }
	       .container li::before{
	           content: '';
	           position: absolute;
	           top: -23px;
	           left: 15px;
	           width: 55px;
	           height: 30px;
	           border-bottom: 3px solid  rgb(61, 61, 61);
	           border-radius: 50%;
	       }
	       .container li:nth-of-type(2n+1){
	          animation: lan 2s infinite;
	       }
			 .container li:nth-child(2n+2){
	           animation: huang 2.2s infinite;
	       }
			 .container li:nth-child(3n+3){
	           animation: zhi 1.8s infinite;
	       }
	      .container li:nth-child(4n+4){
	       animation: lv 2.8s infinite;
	      }
	 
	       @keyframes lan{
	           0%,100%{
	               background-color: rgba(4, 255, 242, 0.5);
	           }
	           50%{
	               background-color: rgb(4, 255, 242);
	               box-shadow: 0 0 10px rgb(4, 255, 242),0 0 30px rgb(4, 255, 242),0 0 50px rgb(4, 255, 242);              
	           }
	       }
	      @keyframes huang{
	           0%,100%{
	               background-color: rgba(251, 255, 4,.5);
	           }
	           50%{
	               background-color: rgb(251, 255, 4);
	               box-shadow: 0 0 10px rgb(251, 255, 4),
	               0 0 12px rgb(251, 255, 4),
	               0 0 30px rgb(251, 255, 4);              
	           }
	       }
	       @keyframes lv{
	           0%,100%{
	               background-color: rgba(33, 255, 4,.5);
	           }
	           50%{
	               background-color: rgb(33, 255, 4);
	               box-shadow: 0 0 10px rgb(33, 255, 4),
	               0 0 12px rgb(33, 255, 4),
	               0 0 30px rgb(33, 255, 4);              
	           }
	       }
	       @keyframes zhi{
	           0%,100%{
	               background-color:  rgba(255, 4, 255,.5);
	           }
	           50%{
	               background-color: rgb(255, 4, 255);
	               box-shadow: 0 0 10px  rgb(255, 4, 255),
	               0 0 25px  rgb(255, 4, 255),
	               0 0 40px  rgb(255, 4, 255);              
	           }
	       }
</style>
